<script setup>
import { ref, onMounted } from 'vue';
import { subEvent } from "../api/event";

const headers = ref({});
const body = ref('');
const raw = ref('');
const parsedHeaders = ref([]);
const activeTab = ref('header');

function parseHeaders(headerStr) {
  try {
    const headerObj = typeof headerStr === 'string' ? JSON.parse(headerStr) : headerStr;
    return Object.entries(headerObj).map(([key, value]) => ({
      name: key,
      value: Array.isArray(value) ? value.join(', ') : value
    }));
  } catch (e) {
    console.error('解析响应头失败:', e);
    return [];
  }
}

function updateResponse(data) {
  headers.value = data.headers || {};
  body.value = data.body || '';
  raw.value = data.raw || '';
  parsedHeaders.value = parseHeaders(headers.value);
}

onMounted(() => {
  subEvent('update-response', updateResponse);
});
</script>

<template>
  <div class="response-view">
    <div class="tab-buttons">
      <button 
        :class="['tab-button', { active: activeTab === 'header' }]"
        @click="activeTab = 'header'"
      >
        Header
      </button>
      <button 
        :class="['tab-button', { active: activeTab === 'body' }]"
        @click="activeTab = 'body'"
      >
        Body
      </button>
      <button 
        :class="['tab-button', { active: activeTab === 'raw' }]"
        @click="activeTab = 'raw'"
      >
        Raw
      </button>
    </div>

    <div class="content-area">
      <div v-if="activeTab === 'header'" class="table-container">
        <table class="header-table">
          <thead>
            <tr>
              <th>名称</th>
              <th>值</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="header in parsedHeaders" :key="header.name">
              <td>{{ header.name }}</td>
              <td>{{ header.value }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div v-if="activeTab === 'body'" class="body-content">
        <pre>{{ body }}</pre>
      </div>

      <div v-if="activeTab === 'raw'" class="raw-content">
        <pre>{{ raw }}</pre>
      </div>
    </div>
  </div>
</template>

<style scoped>
.response-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tab-buttons {
  display: flex;
  gap: 1px;
  background-color: #f5f5f5;
  padding: 8px;
}

.tab-button {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.tab-button:hover {
  color: #333;
}

.tab-button.active {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}

.content-area {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.table-container {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  border: 1px solid #ddd;
}

.header-table {
  width: 100%;
  border-collapse: collapse;
}

.header-table th,
.header-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.header-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1;
}

.header-table tr:nth-child(even) {
  background-color: #fafafa;
}

.header-table tr:hover {
  background-color: #f0f0f0;
}

.header-table th:first-child,
.header-table td:first-child {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

.body-content,
.raw-content {
  padding: 16px;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>